<template>
    <el-card>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input :placeholder="$t('table.placeholder')" clearable v-model="queryFrom.query"></el-input>
            </el-col>
            <el-col :span="5">
                <el-button type="primary" @click="Search" icon="el-icon-search">{{ $t('table.search') }}</el-button>
                <el-button type="primary" @click="open('add')">{{ $t('table.adduser') }}</el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column :width="item.width" :fixed="item.fixed" :prop="item.prop"
                :label="$t(`table.${item.label}`)" v-for="(item, index) in options" :key="index">
                <template v-slot="{ row }" v-if="item.prop === 'mg_state'">
                    <el-switch v-model="row.mg_state" @change="ChangeStatus(row)"></el-switch>
                </template>
                <template v-slot="{ row }" v-else-if="item.prop === 'create_time'">
                    {{$filters.filterTime(row.create_time)}}
                </template>
                <template #default="scope" v-else-if="item.prop === 'action'">
                    <el-button type="primary" icon="el-icon-edit" size="small" @click="editOpen('edit',scope.row)">
                    </el-button>
                    <el-button type="warning" size="small" icon="el-icon-setting" @click="distribution(scope.row)">
                    </el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete"
                        @click="deleteUser(scope.row,scope.$index)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
                :page-sizes="[5, 10, 15, 20]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <Dialog :visible.sync="visible" :type="type" @done="reload" :userInfo="userInfo"></Dialog>
        <Distribution :visible_D.sync="visible_D" @done="reload" :userInfo="userInfo"></Distribution>
    </el-card>
</template>

<script>
import { GetUsersList } from '@/api/http'
import { options } from './options';
import EditDialogVue from './components/Dialog.vue';
import { changeStatus, DeleteUser } from '../../api/http';
import Dialog_twoVue from './components/Dialog_two.vue';

export default {
    name: 'users',
    components: {
        Dialog: EditDialogVue,
        Distribution: Dialog_twoVue
    },
    data() {
        return {
            queryFrom: {
                query: ''
            },
            tableData: [],
            pagenum: 1,
            pagesize: 5,
            total: 20,
            options: options,
            visible: false,
            type: '',
            userInfo: {},
            visible_D: false
        }
    },
    mounted() {
        this.getUsersList()
    },
    methods: {
        /* 刷新表格 */
        reload() {
            this.getUsersList()
        },
        // 搜索
        Search() {
            this.getUsersList()
        },
        //获取用户列表
        async getUsersList() {
            const { data, meta } = await GetUsersList({
                query: this.queryFrom.query,
                pagenum: this.pagenum,
                pagesize: this.pagesize
            })
            if (meta.status == 200) {
                this.total = data.total
                this.tableData = data.users
            }
        },
        //当前页码
        handleSizeChange(val) {
            this.pagesize = val;
            this.getUsersList()
        },
        //每页显示多少条
        handleCurrentChange(val) {
            this.pagenum = val
            this.getUsersList()
        },
        open(type) {
            this.type = type;
            this.userInfo = {};
            this.visible = true;
        },
        editOpen(type, row) {
            this.type = type;
            this.userInfo = row
            this.visible = true;
        },
        // 3. 修改用户状态
        async ChangeStatus(row) {
            const { data, meta } = await changeStatus({
                uid: row.id,
                type: row.mg_state
            })
            if (meta.status == 200) {
                this.$message.success(this.$t('message.updeteSuccess'))
            }
        },
        deleteUser(row, index) {
            this.$confirm(this.$t('dialog.deleteTitle'), '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(async () => {
                const { data, meta } = await DeleteUser({ id: row.id })
                if (meta.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getUsersList()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        distribution(row) {
            this.userInfo = row
            this.visible_D = true;
        }
    },
}
</script>

<style lang="scss" scoped>
</style>